<script>
import HeaderSearch from "@/components/HeaderSearch/index.vue";

export default {
  name: "Navbar",
  components: {HeaderSearch},
  methods: {
    handleCommand(command) {
      this.$router.push(command, () => {
      }, (error) => {
        if (error) {
          // vue-router 3.1.0+ push/replace cause NavigationDuplicated error
          // https://github.com/ElemeFE/element/issues/17044
          if (error.name === 'NavigationDuplicated') return
          console.error(error)
        }
      });

    }
  }
}
</script>

<template>
  <div class="navbar">
    <el-menu mode="horizontal" default-active="/paper" router>
      <el-menu-item index="">首页</el-menu-item>
      <el-menu-item index="/paper">成果管理</el-menu-item>
      <el-menu-item index="/research">课题管理</el-menu-item>
      <!--      <el-menu-item index="getmaterial">生成材料</el-menu-item>-->
      <el-menu-item index="excel">汇总表格</el-menu-item>
      <!--      <el-menu-item index="jieti">结题助手</el-menu-item>-->
      <!--      <el-menu-item index="">填表助手</el-menu-item>-->
      <!--      <el-submenu index="4">
              <template slot="title">学术助手</template>
              <el-menu-item index="aa">生成材料</el-menu-item>
              <el-menu-item index="excel">汇总表格</el-menu-item>
              <el-menu-item index="jieti">结题助手</el-menu-item>
              <el-menu-item index="">填表助手</el-menu-item>
            </el-submenu>-->
      <div class="right-menu">
        <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="click">
          <el-button type="primary" size="small">
            上传新增<i class="el-icon-plus"></i>
          </el-button>
          <el-dropdown-menu>
            <el-dropdown-item command="govresearchupload">纵向课题</el-dropdown-item>
            <el-dropdown-item command="researchupload">横向课题</el-dropdown-item>
            <el-dropdown-item command="paperupload" :divided="true">论文</el-dropdown-item>
            <el-dropdown-item command="patentupload">专利</el-dropdown-item>
            <el-dropdown-item command="softwareupload">软件著作权</el-dropdown-item>
            <el-dropdown-item command="awardupload">个人获奖</el-dropdown-item>
            <el-dropdown-item command="stuawardupload">学生获奖</el-dropdown-item>
            <el-dropdown-item command="materialupload">继续教育材料</el-dropdown-item>
            <el-dropdown-item command="bookupload">著作</el-dropdown-item>
            <el-dropdown-item command="reportupload">新闻报道</el-dropdown-item>
            <el-dropdown-item command="certificateupload">档案资料</el-dropdown-item>
            <el-dropdown-item command="othersupload">其他</el-dropdown-item>
            <!--            <el-dropdown-item :divided=true>成果导入</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>
        <HeaderSearch id="header-search" class="right-menu-item"/>
        <el-dropdown placement="bottom-start" class="avatar-container right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
                 class="user-avatar">
            <i class="el-icon-caret-bottom"/>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/profile" style="text-decoration: none">
              <el-dropdown-item>
                个人信息
              </el-dropdown-item>
            </router-link>
            <el-dropdown-item :divided=true @click.native="logout" style="text-decoration: none">
              <span style="display:block;">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-menu>
  </div>
</template>

<style scoped>
.navbar {
  height: auto;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  .right-menu {
    float: right;
    height: 100%;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}

.right-menu-item {
  display: inline-block;
  padding: 0 8px;
  height: 100%;
  font-size: 18px;
  color: #5a5e66;
  vertical-align: text-bottom;

  &.hover-effect {
    cursor: pointer;
    transition: background .3s;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }
}

</style>
